<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义指令</title>
<link rel="stylesheet" href="../lib/bootstrap3/css/dashboard.css">
<link rel="stylesheet" href="../lib/bootstrap3/css/bootstrap-theme.css">
<link rel="stylesheet" href="../lib/bootstrap3/css/bootstrap.min.css">
<script src="../lib/jquery/jquery-1.10.2.js"></script>
<script src="../lib/bootstrap3/js/bootstrap.min.js"></script>
<script src="../lib/angularjs/angular.min.js"></script>
<script src="../lib/angularjs/angular-messages.min.js"></script>
<script src="../lib/angularjs/angular-sanitize.min.js"></script>
</head>
<body ng-app="directiveApp">
<div class="container-fluid">
    <div class="panel panel-success">
        <div class="panel-heading">自定义指令参数详解</div>
        <div class="panel-body">
            <ul>
                <li>
                    restrict:string【限制】<br/>
                    <ul>
                       <li>
                           A:attribute属性、默认值【例：<xmp style="display:inline"><my-directive></my-directive></xmp>】
                       </li>
                        <li>
                            C:class样式【例：<xmp style="display:inline"><div my-directive="expression"></div></xmp>】
                        </li>
                        <li>
                            E:element元素【例：<xmp style="display:inline"><div class="my-directive:expression;"></div></xmp>】
                        </li>
                        <li>
                            M:【例：<xmp style="display:inline"><--directive:my-directive expression--></xmp>】
                        </li>
                    </ul>
                </li>
                <li>
                    priority:number【优先级】默认值为0，数值越大越被先执行
                </li>
                <li>
                    terminal:boolean【末端的】停止本元素上比本指令优先级低的指令（如下：ngIf的优先级高于ngView，如果ngIf的表达式值为false，则ngView不被执行）
                </li>
                <li>
                    template:string or templeate function(tElement,tAttrs)【模板】
                    <ul>
                        <li>
                            string:一段HTML文本
                        </li>
                        <li>
                            function(tElement,tAttrs):t指的是templeate，如果是多行，需要在行尾加下反斜线，建议使用templateUrl
                        </li>
                    </ul>
                </li>
                <li>
                    templateUrl:string【部署应用之前对HTML模板进行缓存，默认缓存到$templateCache服务中】
                    <ul>
                        <li>一个代表外部HTML文件路径的字符串；</li>
                        <li>一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个外部HTML文件路径的字符串。</li>
                    </ul>
                </li>
                <li>
                    repleace:boolean or string【如果设置了这个参数，值必须为true，因为默认值为false】
                    <p>
                        <xmp style="display:inline">【html：<span some-directive></span>】</xmp><br/>
                        <xmp style="display:inline">【js：return {template: ‘<span>some stuff here</span>’}】</xmp><br/>
                        <xmp style="display:inline">【取值为false：<span some-directive><span>some stuff here</span></span>’】</xmp><br/>
                        <xmp style="display:inline">【取值为true：<span>some stuff here</span>】</xmp><br/>
                    </p>
                </li>
                <li>
                    scope:boolean or object【当scope设置为true时，会从父作用域继承并创建一个新的作用域对象。】
                </li>
                <li>
                    transclude:boolean
                </li>
                <li>
                    controller:string or function(scope, element, attrs, transclude, otherInjectables)
                </li>
                <li>
                    controllerAs: String
                </li>
                <li>
                    require: String
                </li>
                <li>
                    link: function(scope, iElement, iAttrs)
                </li>
                <li>
                    compile:function(tElement, tAttrs, transclude)
                </li>
            </ul>
        </div>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading"><b>scope</b></div>
        <div class="panel-body">
            <div  class="well bg-danger"  ng-init="someProperty = '这是根节点定义的值'">
                <div class="alert alert-success" role="alert">
                    【1、 {{ someProperty }}】【2、 {{ siblingProperty }}】【3、 {{ aThirdProperty }}】【4、 {{ aFourthProperty }}】
                </div>
                <div class="well "  ng-init="siblingProperty='这是第一层子节点定义的值'">
                    <div class="alert alert-success" role="alert">
                        【1、 {{ someProperty }}】【2、 {{ siblingProperty }}】【3、 {{ aThirdProperty }}】【4、 {{ aFourthProperty }}】
                    </div>
                    <div class="well" ng-init="aThirdProperty = '这是第二层子节点定义的值'" ng-controller="SomeController">
                        <fieldset>
                            <legend>一个新的controller，父节点访问不到里面定义的变量</legend>
                            <div class="alert alert-success" role="alert">
                                【1、 {{ someProperty }}】【2、 {{ siblingProperty }}】【3、 {{ aThirdProperty }}】【4、 {{ aFourthProperty }}】
                            </div>
                            <div class="well" ng-init="aFourthProperty='这是第三层子节点定义的值'">
                                <div class="alert alert-success" role="alert">
                                    【1、 {{ someProperty }}】【2、 {{ siblingProperty }}】【3、 {{ aThirdProperty }}】【4、 {{ aFourthProperty }}】
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading"><b>scope</b></div>
        <div class="panel-body">
            <div ng-init="root='root'" class="well well-sm">
                <div class="alert alert-danger">
                    【1、{{root}}】【2、{{child01}}】【3、{{child0101}}】【4、{{child010101}}】
                </div>
                <div ng-init="child01='child01'" class="well">
                    <div class="alert alert-danger">
                        【1、{{root}}】【2、{{child01}}】【3、{{child0101}}】【4、{{child010101}}】
                    </div>
                    <div  scope-directive ng-init="child0101='child0101'" class="well">
                        <div class="alert alert-danger">
                            【1、{{root}}】【2、{{child01}}】【3、{{child0101}}】【4、{{child010101}}】（这里面是在<b>自定义指令</b>里面，外面无法访问到第三个变量）
                        </div>
                        <div   ng-init="child010101='child010101'"  class="well well-lg" ng-controller="child010101Controller">
                            <div class="alert alert-danger">
                                【1、{{root}}】【2、{{child01}}】【3、{{child0101}}】【4、{{child010101}}】（这里面是在新的<b>controller</b>里面，外面无法访问到第四个变量）
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">隔离作用域</div>
        <div class="panel-body">
            <div class="well" ng-init="glzyy='隔离作用域根节点'">
                【1、{{glzyy}}】【2、{{glzyy2}}】
                <div glzyy-directive class="well">
                    【1、{{ glzyy }}】【2、{{ glzyy2 }}】
                    <div  class="well" ng-init="glzyy2='隔离作用域第一个子节点'" ng-controller="glController">
                        <div glzyy-directive>
                            【1、{{ glzyy }}】【2、{{ glzyy2 }}】
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-footer">
            隔离作用域需要将scope设置为obj即{}，这样可以阻止访问外部作用域。
        </div>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">隔离作用域2</div>
        <div class="panel-body">
            <div class="well">
                <hello></hello>
                <hello></hello>
                <hello></hello>
            </div>
            <div class="well">
                <hello2></hello2>
                <hello2></hello2>
                <hello2></hello2>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var app=angular.module("directiveApp",[]);
    app.run(function($rootScope, $timeout,$interval) {});
    app.controller('SomeController',function ($scope) {$scope.a=1;});

    app.controller('child010101Controller',function ($scope) {});
    app.directive('scopeDirective',function () {
        return {restrict: 'AE', scope: true};
    });

    app.controller('glController',function ($scope) {});
    /** 隔离作用域 **/
    app.directive('glzyyDirective',function () {
        return {
            restrict:'A',
            scope:{},
            priority: 100
        }
    });

    /** 隔离作用域 **/
    app.directive("hello", function() {
        return {
            restrict: 'AE',
            template: '<div><input type="text" ng-model="userName"/>{{userName}}</div>',
            replace: true
        }
    });

    /** 隔离作用域 **/
    app.directive("hello2", function() {
        return {
            restrict: 'AE',
            scope:{},
            template: '<div><input type="text" ng-model="userName"/>{{userName}}</div>',
            replace: true
        }
    });
</script>
</html>
<script id="myTemplateName.html" type="text/ng-template">
    <h1> Hello </h1>
</script>
<style>
    .odd{font-size:15px;font-weight:bolder;}
    .even{}
</style>